<template>
	<view>
		<u-tabs :list="collectionData" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
		            color: 'red',
		            fontWeight: 'bold',
		            transform: 'scale(1.05)'
		        }" :inactiveStyle="{
		            color: '#606266',
		            transform: 'scale(1)'
		        }" itemStyle="width: 42%; padding-left: 15px; padding-right: 15px; height: 34px;">
		</u-tabs>
		<view class="content">
			<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" class="content-image" mode=""></image>
			<view class="font">
				<view class="font-name">测试测试</view>
				<view class="font-price">￥20</view>
			</view>
			<button class="content-button">去购买</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 优惠卷数据
				collectionData: [{
					name: '商品',
				}, {
					name: '店铺',
				}]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		margin: 20rpx 20rpx 0rpx 20rpx;
		background-color: #fff;
		display: flex;
	}

	.content-image {
		width: 200rpx;
		height: 200rpx;
	}

	.font {
		margin-left: 20rpx;
	}

	.font-name {
		font-size: 40rpx;
		margin-top: 20rpx;
	}

	.font-price {
		font-size: 35rpx;
		margin-top: 20rpx;
		color: red;
	}

	.content-button {
		border: 1px solid red;
		color: red;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 90rpx;
		margin-left: 180rpx;
	}

	button::after {
		border: none;
	}

	button {
		padding-left: 20rpx;
		padding-right: 20rpx;
		text-align: center;
		line-height: 1.35;
		overflow: hidden;
		height: 100%;
	}
</style>